<style>
		#dialog-project-code { font-size: 80%; }
</style>
	
<script type="text/javascript">
	var trActived;
	var rowData;

	$(function(){
		$( "#dialog-project-code" ).dialog({
			resizable:false,
			autoOpen: false,
			width: 500,
			modal: true,
			close: function() {
			}
		});
		
		jQuery("#jqgrid-project").jqGrid({
			url:'projectsearch.do',
			datatype: "json",
			colNames:['<bean:message key="popup.projectsearch.col.projectCode"/>',
			          '<bean:message key="popup.projectsearch.col.seri"/>',
			          '<bean:message key="popup.projectsearch.col.projectName"/>'],
			colModel:[
			    {name:'projectCode',index:'projectCode',sortable: false, width:130},
			    {name:'seri',index:'seri',sortable: false, width:60},
			    {name:'projectName',index:'projectName',sortable: false, width:190}
			],
			sortname: 'projectName',
			viewrecords: true,
			sortorder: "desc",
			sortable: true,
			jsonReader: {
			  repeatitems: false,
			  root: "listProjects"
			},
			onSelectRow: function (rowid,status) {
				rowData = $('#jqgrid-project').getRowData(rowid);
			},
			ondblClickRow: function (rowid,iRow,iCol,e) {
                rowData = $('#jqgrid-project').getRowData(rowid);
                setSelectedRowDataToProjectRegion();
                $( "#dialog-project-code" ).dialog( "close" );
            }
		});
	});
	
	function setSelectedRowDataToProjectRegion() {
		if (rowData) {
			var selectedRowIndex = $(trActived).parent().children().index($(trActived));
			checkProjectNameChange(selectedRowIndex);
			$(trActived).find('input[name*="projectCode"]').val(rowData['projectCode']);
			$(trActived).find('input[name*="seri"]').val(rowData['seri']);
			$(trActived).find('label[id="projectName"]').text(rowData['projectName']);
			$(trActived).find('input[id="hiddenProjectName"]').val(rowData['projectName']);
		}
	}
	
	function findProjectCode(btnFind) {
		jQuery("#jqgrid-project").jqGrid().clearGridData();
		trActived = $(btnFind).parent().parent();
    	$( "#dialog-project-code" ).dialog( "open" );
    	$.getJSON("divlist.do?guid=" + generateGuid(),
   			function(data){
   				$("select[id='divisionForProject']").removeOption(/./);
   				$.each(data.listDivisions, function(i,divisionObj){
   				  $("select[id='divisionForProject']").addOption(divisionObj.divisionCode, divisionObj.divisionName, divisionObj.selected);                                          
   				});
   			});
   		
   		$.getJSON("deptlist.do?guid=" + generateGuid(),
   			function(data){
   				$("select[id='departmentForProject']").removeOption(/./);
   				$.each(data.listDepts, function(i,deptObj){
   				  $("select[id='departmentForProject']").addOption(deptObj.departmentCode, deptObj.departmentName, deptObj.selected);                                          
   				});
   			});
    }
	
	function searchProject() {
		var deptSelected = $("select[id='departmentForProject']").selectedValues();
		var newUrl = "projectsearch.do?department=" + deptSelected[0];
		jQuery("#jqgrid-project").jqGrid().setGridParam({url : newUrl}).trigger("reloadGrid");
	}
	
	function selectProject() {
		setSelectedRowDataToProjectRegion();
		$( "#dialog-project-code" ).dialog( "close" );
	}
	
	function onChangeDivisionForProject(divisionId) {
		$.getJSON("deptlist.do?division="+divisionId+"&guid=" + generateGuid(),
			function(data){
				$("select[id='departmentForProject']").removeOption(/./);
				$.each(data.listDepts, function(i,deptObj){
				  $("select[id='departmentForProject']").addOption(deptObj.departmentCode, deptObj.departmentName, deptObj.selected);                                          
				});
			});
	}
</script>
<div id="dialog-project-code" title="<bean:message key="popup.projectsearch.title"/>">
<form>
	<div id="filter">
		<div style="float:left; valign:middle;">
		<table id="tableChoosingMaterial">
		<tr>
		<td><bean:message key="popup.lbl.division"/></td>
		<td><select id="divisionForProject" style="margin-right: 20px;" onchange="onChangeDivisionForProject(this.options[selectedIndex].value);"/></td>
		<td><bean:message key="popup.lbl.department"/></td>
		<td><select id="departmentForProject"/></td>
		</tr>
		</table>
		</div>
		<div style="float:right; padding-right: 45;">
			<input class="input" type="button" value="<bean:message key="popup.btn.search"/>" onclick="searchProject();">
		</div>
	</div>
	</form>
	<div class="clear"></div>
	<div id="project-list">
		<table id="jqgrid-project"></table>
	</div>
	<div class="clear"></div>
	<div style="float:right;margin-bottom: 10px; padding-right: 45;">
		<input class="input" type="button" value="<bean:message key="popup.btn.select"/>" onclick="selectProject();">
	</div>
</div>
